<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="https://project.gxrunxiang.com/cdn/b-1.png"></image>
		<image class="img-b" src="https://project.gxrunxiang.com/cdn/b-2.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2">{{ subTitle }}</view>
		<form class="cl">
			<!-- 登录账号 -->
			<view class="login-form-item">
				<u-input v-model="username" placeholder="请输入登录用户名" maxlength="30">
					<u-icon slot="prefix" name="account" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 登录密码 -->
			<view class="login-form-item">
				<u-input v-model="password" type="password" placeholder="请输入登录密码" maxlength="16">
					<u-icon slot="prefix" name="lock" size="35px"></u-icon>
				</u-input>
			</view>
			<!-- 图形验证码 -->
			<view class="login-form-item t-captcha">
				<u-input v-model="inputcode" type="number" placeholder="请输入验证码" maxlength="4">
					<u-icon slot="prefix" name="fingerprint" size="35px"></u-icon>
				</u-input>
				<image :src="captcha" @click="getCaptcha" class="t-captcha-img"></image>
			</view>
			<button @tap="login()">登 录</button>
			<!-- <view style="margin-top: 10px;  text-align: center; ">
				<span v-if="type === 'mp-weixin'"  @click="backto">切换到手机号快捷登录</span>
			</view> -->
			<label class="right">版权所有:© 2022 广西润象信息网络工程有限公司 </label>
		</form>
	</view>
</template>
<script>
	import * as CaptchaApi from '@/api/captcha'
	import {
		isEmpty
	} from '@/utils/verify.js'
	import md5 from 'js-md5';
	import {
		getuser,
		getMenu,
		login,
		getvcodeimg
	} from '@/common/api.js';
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				inputcode: "",
				title: '润象项目管理系统',
				subTitle: '欢迎使用！',
				// 图形验证码信息
				captcha: null,
				// 登录账号
				username: '', // 'admin',
				// 密码
				password: '', //Rx20210528!',
				// 图形验证码
				captchaCode: '',
				uuid: '',
				type:'',
			};
		},
		created() {
			// 获取图形验证码
			this.getCaptcha()
		},
		onLoad(){
			this.type = uni.getSystemInfoSync().uniPlatform
		},
		methods: {
			// ...mapGetters(['$token','$userInfo']),
			// ...mapMutations(['setToken', 'setUserInfo']),
			// setToken(e)
			// {}
			// 获取图形验证码
			getCaptcha() {
				this.getvcode()
				const app = this
				getvcodeimg(this.captchaCode).then(result => {
					app.captcha = result.data
					// app.uuid = result.uuid
				})
			},
			getvcode() {
				let arr = []
				while (arr.length < 3) {
					let num = parseInt(Math.random() * 9)
					// parseInt取正，小数点后面的数字全部抹掉
					// Math.random() 0-1的随机数
					if (arr.indexOf(num) == -1) {
						// this.arr.indexOf(num)若等于-1则证明arr这个数组里没有num这个随机数，因此可以放进这个数组里
						arr.push(num)
					}
				}
				this.captchaCode = arr.join('')
			},
			// 验证表单内容
			validItem() {
				const app = this
				if (isEmpty(app.username)) {
					uni.$u.toast('请输入登录用户名')
					return false
				}
				if (isEmpty(app.password)) {
					uni.$u.toast('请输入登录密码')
					return false
				}
				if (isEmpty(app.captchaCode)) {
					uni.$u.toast('请输入验证码')
					return false
				}
				if (this.captchaCode != this.inputcode) {
					uni.$u.toast('请正确输入3位验证码')
					return false
				}
				return true
			},
			// 确认登录
			login() {
				const app = this
				let valid = app.validItem();
				if (valid) {
					login({
						UserName: app.username,
						Password: md5(app.password)
					}).then(res => {
						if (res.code == 0) {
							uni.removeStorageSync("$userinfo")
							uni.removeStorageSync("$token")
							const {
								user,
								permissions,
								roles
							} = res.data
							uni.setStorageSync("$token", res.data.token)
							uni.setStorageSync("$userinfo", JSON.stringify(user))

							if (user.Roles == "施工负责人角色")
								uni.switchTab({
									url: "/pages/index/buildimages"
								})
							else
								uni.switchTab({
									url: "/pages/index/index"
								})
								// uni.switchTab({
								// 	url: "/pages/index/index"
								// })
						} else {
							uni.$u.toast(res.message)
						}

					})

				}
			},
			// backto(){
			// 	uni.redirectTo({
			// 		url: '/pages/index/login'
			// 	})			
			// }
		}
	};
</script>
<style lang="scss" scoped>
	@import 'index.scss';
</style>
